/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div class="item-title">
      <div class="subject">
        <h3>统计报表 - 销售概况</h3>
        <h5>网站系统销售概况</h5>
      </div>
    </div>

    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>统计分析历史订单交易数, 订单金额, 客单价</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>

    <div class="mDiv">
      <div class="ftitle">
        <h3>销售概况</h3>
        <h5>今日销售总额：￥{{today.total_amount - today.shipping_price}}|人均客单价：￥{{today.order_count == 0 ? 0 : ((today.total_amount - today.shipping_price) / today.order_count)}}|今日订单数：{{today.order_count}}</h5>
      </div>
      <a href @click.prevent="refresh()" class="refresh-date">
        <div title="刷新数据" class="pReload">
          <i class="fa fa-refresh"></i>
        </div>
      </a>
      <div class="searchbox">
        <el-date-picker
          size="small"
          v-model="dateRange"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="日期起始"
          end-placeholder="日期截止"
          @change="getReport()"
        ></el-date-picker>
      </div>
    </div>
    <div style="width: 100%;height: 400px;margin-top:30px">
      <v-chart :options="polar" theme="macarons" />
    </div>
    <div class="tablebox">
      <el-table :data="list" style="width: 100%">
        <el-table-column label="日期" prop="days" width="200"></el-table-column>
        <el-table-column label="订单数" prop="order_count" width="200"></el-table-column>
        <el-table-column label="销售总额" prop="order_amount" width="200"></el-table-column>
        <el-table-column label="客单价" width="200">
          <template
            slot-scope="scope"
          >{{scope.row.order_count == 0 ? 0 : (scope.row.order_amount / scope.row.order_count)}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <router-link
                :to="{name:'report_order',params:{startTime:scope.row.start_time, endTime:scope.row.end_time}}"
              >
                <el-button size="small" icon="el-icon-s-order">查看订单列表</el-button>
              </router-link>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getOrderReportDay } from "@/utils/api";
import ECharts from "vue-echarts";
import "echarts/theme/macarons.js";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/polar";
import "echarts/lib/component/legend";

export default {
  components: {
    "v-chart": ECharts
  },
  data() {
    return {
      polar: {
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ["line", "bar"]
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        calculable: true,
        legend: {
          data: ["交易金额", "订单数", "客单价"]
        },
        xAxis: [
          {
            type: "category",
            data: []
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "金额",
            axisLabel: {
              formatter: "{value} ￥"
            }
          },
          {
            type: "value",
            name: "客单价",
            axisLabel: {
              formatter: "{value} ￥"
            }
          }
        ],
        series: [
          {
            name: "交易金额",
            type: "bar",
            data: []
          },
          {
            name: "订单数",
            type: "bar",
            data: []
          },
          {
            name: "客单价",
            type: "line",
            yAxisIndex: 1,
            data: []
          }
        ]
      },
      dateRange: [
        new Date(new Date().toLocaleDateString()).getTime() -
          6 * 60 * 60 * 24 * 1000,
        new Date(new Date().toLocaleDateString()).getTime() +
          (1 * 60 * 60 * 24 * 1000 - 1)
      ],
      query: {},
      list: [],
      today: { total_amount: 0, shipping_price: 0, order_count: 0 }
    };
  },
  created() {
    this.getTodayReport();
    this.getReport();
  },
  methods: {
    getReport() {
      var that = this;
      this.query.start_time = parseInt(this.dateRange[0].valueOf() / 1000);
      this.query.end_time = parseInt(this.dateRange[1].valueOf() / 1000);
      getOrderReportDay(that.query).then(function(res) {
        that.list = res;
        that.polar.xAxis[0].data = [];
        that.polar.series[0].data = [];
        that.polar.series[1].data = [];
        that.polar.series[2].data = [];
        res.forEach(element => {
          that.polar.xAxis[0].data.unshift(element.days);
          element.order_amount = element.total_amount - element.shipping_price;
          that.polar.series[0].data.unshift(element.order_amount);
          that.polar.series[1].data.unshift(element.order_count);
          that.polar.series[2].data.unshift(
            element.order_count == 0
              ? 0
              : element.order_amount / element.order_count
          );

          element.start_time = parseInt(new Date(element.days) / 1000);
          element.end_time = element.start_time + 86400;
        });
      });
    },
    getTodayReport() {
      var that = this;
      var start_time = parseInt(
        new Date(new Date().toLocaleDateString()).getTime() / 1000
      );
      var end_time = parseInt(new Date().getTime() / 1000);
      getOrderReportDay({ start_time: start_time, end_time: end_time }).then(
        function(res) {
          that.today = res[0];
        }
      );
    },
    refresh() {
      this.getTodayReport();
      this.getReport();
      this.$message({
        type: "success",
        message: "刷新成功！"
      });
    }
  }
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
